<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page isELIgnored="false" %>
<%@ taglib prefix="s" uri="/struts-tags"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<link rel="stylesheet" href="${ctx}/css/common.css" />
<link rel="stylesheet" href="${ctx}/css/main.css" />
<link rel="stylesheet" href="${ctx}/css/dialog/skin/bluebar/ymPrompt.css" />

<script type="text/javascript" src="${ctx}/js/jquery.js"></script>
<script type="text/javascript" src="${ctx}/js/dialog/ymPrompt.js"></script>

<script type="text/javascript">
$(document).ready(function() {
  var leftHeight = $(window).height() - $(".top").height();
  $(".left").height(leftHeight); //左侧菜单区
  $(".control_bar_bg").height(leftHeight); //菜单区显示控制按钮
  
  var mainWidth = $(window).width() - $(".left").width() - $(".control_bar_bg").width(); //主界面宽度
  $("#mainFrame").width(mainWidth);
  $("#mainFrame").height(leftHeight);
  
  if($(".left_content div:first-child .menu_item ul li").html() == null){
	  changeLeftDisplay();
  }
  
  $(window).resize(function(){
	  var h = $(this).height();
	  leftHeight = h - $(".top").height();
	  $(".left").height(leftHeight);
	  $(".control_bar_bg").height(leftHeight);
	  
	  if($(".left").css("display") == "block"){
		  mainWidth = $(this).width() - $(".left").width() - $(".control_bar_bg").width();
		  $("#mainFrame").width(mainWidth);
		  $("#mainFrame").height(leftHeight);
	  } else {
		  mainWidth = $(this).width() - $(".control_bar_bg").width();
		  $("#mainFrame").width(mainWidth);
		  $("#mainFrame").height(leftHeight);
	  }
  });
});

//设置菜单区域的可见性
function changeLeftDisplay(){
	if($(".left").css("display") == "block"){
		$(".left").css("display","none");
		mainWidth = $(window).width() - $(".control_bar_bg").width(); //主界面宽度
	} else {
		mainWidth = $(window).width() - $(".left").width() - $(".control_bar_bg").width(); //主界面宽度
		$(".left").css("display","block");
	}
	
	
  	$("#mainFrame").width(mainWidth);
}

var currentMenu = 0;


//菜单点击事件
function getChild(id){
	//获取菜单连接
	var link = $("#menu_"+id).attr("link");
	
	if(link != "#"){
		$("#mainFrame").attr("src",link);
	}
	
	//改变当前TAB样式，并获取当前TAB的ID
	for(i = 0; i < $("a[id^='menu_']").length; i++){
		if($("#"+$("a[id^='menu_']")[i].id + " span").hasClass("menu_on")){
			currentMenu = $("a[id^='menu_']")[i].id.split("_")[1];
		}
	}
	
	//如果有子菜单就显示侧边栏
	if($("#childMenu_"+id+" .menu_item ul li").html() != null){
		mainWidth = $(window).width() - $(".left").width() - $(".control_bar_bg").width(); //主界面宽度
		$(".left").css("display","block");
		$("#mainFrame").width(mainWidth);
		
		$("#mainFrame").attr("src",$("#childMenu_"+id+" .menu_item ul li a").attr("href"));
	} else {
		$(".left").css("display","none");
		mainWidth = $(window).width() - $(".control_bar_bg").width(); //主界面宽度
		$("#mainFrame").width(mainWidth);
	}
	
	$("#childMenu_"+currentMenu).css("display","none"); //隐藏当前子菜单
	$("#menu_"+currentMenu+" span").removeClass("menu_on");
	$("#menu_"+currentMenu+" span").addClass("menu_off");
	
	$("#childMenu_"+id).css("display","block"); //显示点击的子菜单
	currentMenu = id;
	$("#menu_"+currentMenu+" span").removeClass("menu_off");
	$("#menu_"+currentMenu+" span").addClass("menu_on");
}

//退出
function logout(){
	top.location="../login/logout.action"; 
}

//整个界面刷新
function goToIndex(){
	window.location.reload();
}

//刷新
function refresh(){
	var currentUrl = $("#mainFrame").attr("src");
	$("#mainFrame").attr("src",currentUrl);
}
</script>

</head>

<body>
	<div class="top">
    	<div class="top_logo">
        	<img src="${ctx}/images/common/logo.png" width="198" height="82" />
        </div>
        <div class="top_right">
        	<div class="top_right_split"></div>
            <div class="top_right_bg">
            	<div class="top_quick_bar">
                	<div class="top_quick_bar_top"></div>
                    <div class="top_quick_bar_center">
                    	<div class="quick_bar_item">
                        	<img src="${ctx}/images/app/index.png" width="17" height="17" />
                            <span class="menu_bar_text" onclick="goToIndex()"><s:text name="MainPage" /></span>
                        </div>
                        <div class="quick_bar_item">
                        	<img src="${ctx}/images/app/refresh.png" width="17" height="17" />
                            <span class="menu_bar_text" onclick="refresh()"><s:text name="Refresh" /></span>
                        </div>
                        <div class="quick_bar_item" onclick="logout();">
                        	<img src="${ctx}/images/app/logout.png" width="17" height="17" />
                            <span class="menu_bar_text"><s:text name="Logout" /></span>
                        </div>
                    </div>
                    <div class="top_quick_bar_bottom"></div>
                </div>
                <div class="top_quick_bar_left"></div>
            </div>
            <div class="menu_bar">
            	<ul>
	            <c:forEach var="menu" items="${menus}" varStatus="index">
	            	<c:if test="${index.index == 0 && menu.level == 1}">
	            	<li>
	            		<a id="menu_${menu.id}" href="javascript:getChild(${menu.id});" link="${menu.link }">
	            			<span class="menu_on">${menu.menuName }</span>
	            		</a>
	            	</li>
	            	</c:if>
	            	<c:if test="${index.index != 0 && menu.level == 1}">
	            	<li>
	            		<a id="menu_${menu.id}" href="javascript:getChild(${menu.id});" link="${menu.link }">
	            			<span class="menu_off">${menu.menuName }</span>
	            		</a>
	            	</li>
	            	</c:if>
	            </c:forEach>
	            </ul>
            </div>
            <div class="status_bar">
            	<s:text name="CurrentUser" />[${account.name }]<s:text name="SayHello" />！<s:text name="CurrentDate" />${currentDate }
            </div>
        </div>
    </div>
    <div class="left">
    	<div class="left_top"></div>
        <div class="left_center">
        	<div class="left_left"></div>
            <div class="left_content">
            <c:forEach var="menu" items="${menus}" varStatus="index">
            	<c:if test="${index.index == 0}">
            	<div  id="childMenu_${menu.id}" style="display:block;">
            		<div class="menu_title">${menu.menuName}</div>
                    <div class="menu_item">
                        <ul>
                        	<c:forEach var="child" items="${menu.menus}">
                        	<li>
                                <a href="${child.link}" target="mainFrame">
                                    <span class="menu_item_text">${child.menuName}</span>
                                </a>
                            </li>
                        	</c:forEach>
                        </ul>
                    </div>
                </div>
            	</c:if>
            	<c:if test="${index.index != 0}">
            	<div  id="childMenu_${menu.id}" style="display:none;">
            		<div class="menu_title">${menu.menuName}</div>
                    <div class="menu_item">
                        <ul>
                        	<c:forEach var="child" items="${menu.menus}">
                        	<li>
                                <a href="${child.link}" target="mainFrame">
                                    <span class="menu_item_text">${child.menuName}</span>
                                </a>
                            </li>
                        	</c:forEach>
                        </ul>
                    </div>
                </div>
            	</c:if>
            </c:forEach>
            </div>
        	<div class="left_right"></div>
        </div>
        <div class="left_bottom"></div>
    </div>
    <div class="control_bar_bg">
    	<div class="cotrol_bar">
        	<img src="${ctx}/images/app/control_bar.jpg" width="12" height="172" onclick="changeLeftDisplay();" />
        </div>
    </div>
    
    <iframe id="mainFrame" name="mainFrame" src="workTablePage.action" scrolling="auto" style="border:0px;" />
</body>
</html>
